<template>
	<div id="films">
		<van-tabs v-model="active">
		  <van-tab title="正在上映"></van-tab>
		  <van-tab title="即将上映"></van-tab>
		</van-tabs>
		<router-view></router-view>
	</div>
	
</template>

<script>
	import { Tab, Tabs } from 'vant';
	export default {
		data(){
			return{
				active: 0
			}
		},
		watch: {
			active(index){
//				console.log(index);
				// 路由跳转
				if(index === 0){
					this.$router.push({
						name: 'now-playing'
					})
				} else{
					this.$router.push({
						name: 'coming-soon'
					})
				}
			}
		},
		
		components:{
			[Tab.name] : Tab,
			[Tabs.name] : Tabs
		},
		
		// 路由守卫
		beforeRouteEnter(to,from,next){
			next((vm)=>{
				if(to.name === 'coming-soon'){
					vm.active = 1;
				}else{
					vm.active = 0;
				}
			})
		}
	}
</script>

<style>
</style>